<script setup lang="ts">
import { provide, computed } from 'vue'
import { ComponentSize, ElConfigProvider } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/stores/modules/app'

const { variables } = useDesign()
const appStore = useAppStore()

interface Props {
  size: ComponentSize
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default'
})

provide('configGlobal', props)

const currentLocale = computed(() => appStore.currentLocale)
</script>

<template>
  <ElConfigProvider
    :namespace="variables.elNamespace"
    :locale="currentLocale.elLocale"
    :message="{ max: 5 }"
    :size="size"
  >
    <slot></slot>
  </ElConfigProvider>
</template>
